<template>
    <!--带密码可见功能的密码输入框-->
    <van-field
      class="field"
      v-model="password"
      :type="passwordType"
      
      :placeholder=placeholder
      :required="required"
      :rules="[{required: rulesRequired},{ pattern,message: rulesMessage}]"
      @input="$emit('input',password)">
      <template slot="right-icon">
        <img 
        :src="passwordType==='password'?'https://cdn3.axureshop.com/demo/1525603/images/%E5%B8%90%E5%8F%B7%E5%AF%86%E7%A0%81%E7%99%BB%E5%BD%95/u362.png':'https://cdn3.axureshop.com/demo/1525603/images/%E5%B8%90%E5%8F%B7%E5%AF%86%E7%A0%81%E7%99%BB%E5%BD%95/u364.png'"
             alt=""
             @click.stop="switchPasswordType">
      </template>
    </van-field>
  </template>
  
  <script>
  
    export default {
      name: "PasswordField",
      model: {
        prop: 'inputValue',
        event: 'input'
      },
      props: {
        /**
         * 当前输入的值
         */
        inputValue: {
          type: String,
          default: ''
        },
        /**
     
        /**
         * 占位提示文字
         */
        placeholder: {
          type: String,
          default: '请输入密码'
        },
        /**
         * 是否显示表单必填星号
         */
        required: {
          type: Boolean,
          default: true
        },
        /**
         * 校验提示文案
         */
        rulesMessage: {
          type: String,
          default: '请输入正确的密码'
        },
        /**
         * 校验规则：是否为必须字段
         */
        rulesRequired: {
          type: Boolean,
          default: true
        }
      },
      data() {
        return {
          password: this.inputValue,
          passwordType: 'password',
          pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/      //6-20位字符数字字母组合密码规则

        }
      },
      methods: {
        /**
         * 密码是否可见
         */
        switchPasswordType() {
          this.passwordType = this.passwordType === 'password' ? 'text' : 'password'
        }
      }
    }
  </script>
  
  <style scoped >

  

  </style>